<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Google Maps Effect</title>

    <style type="text/css">
        #div1 {
            overflow: hidden;
            position: relative;
            left: 100px;
            border: 5px solid #000;
            width: 400px;
            height: 200px;
        }

        img {
            border: 1px solid #000;
        }
        
    </style>

    <script type="text/javascript">
    //<![CDATA[
        var dragObject = null;
        var mouseOffset = null;

        document.onmousemove = mouseMove;
        document.onmouseup = mouseUp;

        function MousePoint(x, y) {
            this.x = x;
            this.y = y;
        }

        function mousePosition(evnt) {
            var x = parseInt(evnt.clientX);
            var y = parseInt(evnt.clientY);
            return new MousePoint(x, y);
        }

        function getMouseOffset(target, evnt) {
            var theEvent = evnt ? evnt : window.event;
            var mousePos = mousePosition(theEvent);

            var x = mousePos.x - target.offsetLeft;
            var y = mousePos.y - target.offsetTop;

            return new MousePoint(x, y);
        }

        function mouseUp(evnt) {
            dragObject = null;
        }

        function mouseMove(evnt) {
            if(!dragObject) { return; }
            
            var theEvent = evnt ? evnt : window.event;
            var mousePos = mousePosition(theEvent);

            if(dragObject) {
                dragObject.style.position = 'relative';
                dragObject.style.top = mousePos.y - mouseOffset.y + "px";
                dragObject.style.left = mousePos.x - mouseOffset.x + "px";

                return false;
            }
        }

        function makeDraggable(item) {
            if (item) {
                item = document.getElementById(item);
                item.onmousedown = function(theEvent) {
                    dragObject = this;
                    mouseOffset = getMouseOffset(this, theEvent);

                    return false;
                };
            }
        }

        window.onload = function() {
            makeDraggable("img1")
        }
    //]]>

    </script>
    
</head>
<body>
    <div id="div1">
        <img id="img1" src="example9.12_fig01.png" alt="Figure 9-1" />
    </div>

</body>
</html>
